<template>
    <div class="wrap" ref="wrap">

        <div class="index-top flex">
            <div class="user flex">
                <div class="pic-box"><img :src='shopList.shopImg'></div>
                <h2>{{shopList.shopName}}({{shopList.shopTypeName}})</h2>
                <div class="star flex">
                    <rater v-model="shopList.shopGrade" disabled></rater>
                </div>
            </div>

            <div class="user-btns flex">
                <span @click="gochat">联系客服</span>
                <span @click="gosave">{{save==0?"收藏店铺":"取消收藏"}}</span>
            </div>
        </div>

        <div class="index-nav">
            <ul class="flex">
                <li>
                    <a href="javascript:;" class="flex">
                        <span>{{shopList.shopCollect}}</span>
                        <h2>商品</h2>
                    </a>
                </li>

                <li>
                    <a href="javascript:;" class="flex">
                        <span>{{shopList.shopSalesVolume}}</span>
                        <h2>销量</h2>
                    </a>
                </li>

                <li>
                    <a href="javascript:;" class="flex">
                        <span>{{shopList.shopVermicelli}}</span>
                        <h2>粉丝</h2>
                    </a>
                </li>
            </ul>
        </div>

        <div class="index-banner">
            <img :src="shopList.bannerImg">
        </div>

        <div class="index-yh flex" v-show="couponInfoList.length>0">
            <a href="javascript:;" @click="getcount(couponInfoListItem.id)" v-for="(couponInfoListItem,index) in couponInfoList" :key="index">
                <div class="yh-box">
                    <div class="yh-top flex">
                        <div class="yh-left flex">
                            ￥<span>{{couponInfoListItem.numberValue}}</span>
                        </div>
                        <div class="yh-right flex">
                            <span>元优惠券</span>
                            <span>订单满{{couponInfoListItem.conditionValue}}使用</span>
                        </div>
                    </div>

                    <div class="yh-bom flex">
                        活动时间：到{{couponInfoListItem.createDateName.substr(5,5)}}日截止
                    </div>

                </div>
            </a>
        </div>   

        <div class="index-main">
            <div class="index-main-btn flex" ref='myBox' id="searchBar" :class="searchBarFixed == true ? 'isFixed' :''">
                <a href="javascript:;" :class="{'active':index==menuindex}" :key='index' v-for="(item,index) in goodsListTab" @click="getGoodsLIst(item.id,index)">{{ item.text }}</a>               
                <a href="javascript:;" :class="{'active':3==menuindex}"  @click="getGoodsLIst('3')">价格<span>

					<div class="sort-icons">
						<i class="fa fa-angle-up" :class="{actives:sortPrice==='up'}"></i>
						<i class="fa fa-angle-down" :class="{actives:sortPrice==='down'}"></i>
					</div>
					</span></a>
            </div>
            <div class="index-main-wrap">
                <div class="flex">
                    <div class="index-main-list" v-for="(itemgood,index) in goodsList" :key="index">
                      <router-link  :to='{path:"/goodsDetail",query:{goodsId:itemgood.id,userId:$route.query.userId}}'>
                        
                        <div class="pic-box">
                                <img :src="itemgood.logo">
                            </div>
                            <div class="text">
                                <h1>{{itemgood.name}}</h1>
                                <h2>￥{{itemgood.price}}</h2>
                                <span>{{itemgood.schoolName}}</span>
                            </div>
                        
                        
                    </router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>


<script>
    import axios from '@/api/request'
    import { Rater } from 'vux'
    export default {
        name:'index',
        components: {
            Rater,
        },
        data () {
            return {
                menuindex: 0,
                shopList:{},
                save:0,
                searchBarFixed :false,
                goodsList:[],
                goodsListTab:[
                    {
                        id:"0",
                        text:'全部'
                    }, {
                        id:"1",
                        text:'最新'
                    }, {
                        id:"2",
                        text:'热销'
                    }
                ],
                couponInfoList:[],   //优惠卷
                sortPrice: "up", //up为由高到底，down由底到高
            }
        },
        mounted(){
             this.getInformation()
             this.IfSave()
               window.addEventListener('scroll', this.handleScroll)
             this.getGoodsLIst()
        },
        destroyed () {
             window.removeEventListener('scroll', this.handleScroll)
        },
        methods:{
        handleScroll () {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            var offsetTop = document.querySelector('#searchBar').offsetTop
            console.log(scrollTop)
             console.log(offsetTop)
            if (scrollTop > offsetTop) {
                this.searchBarFixed = true
            } else {
                this.searchBarFixed = false
            }
        },
         getcount(id){ //获取优惠卷
           var data={
                   userId : this.$route.query.userId,
                   couponId : id// shopId
                }
            axios('/device/couponUser/createer','post',data).then(res=>{
                if(res.data.code==1000){
                     this.$vux.toast.text('领取成功', 'middle')
                }else if(res.data.code==1018){
                     this.$vux.toast.text('您已领取过优惠卷啦～', 'middle')
                }
            }) 
          },
           gosave(){  //收藏
           var self=this
             if(self.save==1){
                 self.$vux.confirm.show({
                    title: '取消收藏',

                    content: '您确认取消收藏店铺么',
                    onShow () {
                    console.log('plugin show')
                    },
                    onHide () {
                    console.log('plugin hide')
                    },
                   onConfirm () { 
                       self.gosaveIf()
                    },
                })
             }else{
                  self.gosaveIf()
             }
           },
           gosaveIf(){
               var self=this
               var data={
                   dis : self.save, // 0: 收藏 1: 取消收藏
                   userId : self.$route.query.userId,
                   type : 1, // 1: 收藏店铺
                   proxyId : self.$route.query.shopId// shopId

               }
             
                 axios('/device/collection/inIf','post',data).then(res=>{
                    if(res.data.code==1000){
                      self.IfSave()
                    }
                })
           },
           IfSave(){   //判断是否收藏    
              var self = this;
            var  data = {
                    userId: self.$route.query.userId,
                    type:1,
                    proxyId:self.$route.query.shopId
                }
                axios('/device/collection/difference','post',data).then(res=>{
                    console.log(res)
                    if(res.data.code==1000){
                        self.save=res.data.data.shop
                    }else{
                        self.save=0
                    }
                })
           },
           gochat() {
            var phone = this.shopList.phone
            this.$router.push({path: '/chat',query:{fromGoods: false,servicePhone: phone,type: 2}})
           },
           getInformation(){ //获取信息
                 var self = this;
                self.shopId= self.$route.query.shopId;
                axios('/device/shop/get/'+self.shopId,'post',{}).then(res=>{
                    if(res.data.code==1000){
                        console.log(99)
                        console.log(res)
                        self.shopList=res.data.data.shop
                        self.couponInfoList=res.data.data.couponInfoList
                       
                    }
                })
           },
           getGoodsLIst(index){   //获取店铺全部商品
               var self=this
               var data={}
               data={
                   pageNumber: 1,
                   pageSize: 40,
                    param: {
                    ik : index,   // 0: 全部  1: 最新  2: 销量排行  3: 价格  
                    shopId : self.$route.query.shopId,
                    // sequence : "1" // 当 ik 为 3 的时候，传该值。1：由低到高，2：由高到低
                    }
                }
               
               
                if(index!=undefined){
                  self.menuindex=index
                  data.param.ik=index
               
                  if(index==3){
                      if(self.sortPrice=='up'){
                        data.param.sequence='2'
                        self.sortPrice='down'
                      }else{
                        self.sortPrice=='up'
                        data.param.sequence='1'
                      }
                     
                       
                  }
                }else{
                    data.param.ik='0'
                }
                self.goodsList=[]
                 console.log(data)
                axios('/device/product/fourTable','post',data).then(res=>{
                    console.log(res)
                    if(res.data.code==1000){
                        self.goodsList=res.data.data.list
                        //self.couponInfoList=res.data.data.couponInfoList
                       if(index!=undefined){
                        //  setTimeout(function(){
                        //     var offsetTop = document.querySelector('#searchBar').offsetTop
                        //    document.documentElement.scrollTop=offsetTop
                        // },200)
                        self.$nextTick(()=> {
                            let aa = document.querySelector('#searchBar').offsetTop
                            console.log(aa)
                            document.documentElement.scrollTop=aa
                        })
                       }
                        
                    }
                })
           }
        }
    }
</script>

<style scoped lang="less">
    @import '../assets/css/index.css';
     .isFixed{
    position:fixed;
    background-color:#Fff;
    top:0;
    z-index:999;
  }
    .sort-icons{
        width: .226667rem /* 17/75 */;
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
        padding-left: .213333rem /* 16/75 */;
        i{
          color: #9a9a9a;
          &.actives{
            color: #000000;
          }
        }
    }
</style>

